@charset "utf-8";
@import "reset.scss";
@import "common.scss";

@function vw($w) {
  @return ($w/1920) * 100 + vw;
}

.wrap {
  .nav {
    // position: fixed;
    // left: 0;
    // top: vw(-80);
    // transition: all 1s;
    z-index: 100;
  }

  header {
    width: 100%;
    height: vw(770);
    position: relative;

    .beijing {
      width: 100%;
      height: 100%;
      display: block;
    }

    .fangantigong{
        width: vw(1370);
        height: vw(695);
        position: absolute;
        left: vw(270);
        top: 0;
        display: flex;

        .tigong1{
            height: 100%;
            width: vw(270);
        

            .fangan{
                width: 100%;
                height: vw(170);
    
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .tigong2{
            width: vw(820);

            .bigbox{
                height: vw(512);
                width: 100%;
                position: relative;

                .heise{
                    width: 100%;
                    height: 100%;
                    background-color: rgba($color: #000000, $alpha: 0.7);
                    position: absolute;
                    left: 0;
                    top: 0;

                    .ziti1{
                      width: vw(110);
                      height: vw(60);
                      position: absolute;
                      top: vw(144);
                      left: vw(345);
                    }

                    .ziti2{
                      width: vw(340);
                      height: vw(38);
                      position: absolute;
                      top: vw(300);
                      left: vw(235);
                    }

                    .ziti3{
                      width: vw(618);
                      height: vw(45);
                      position: absolute;
                      top: vw(234);
                      left: vw(90);
                    }

                   
                }


                img{
                    width: 100%;
                    height: 100%;
                }
            }

            .smallbox{
                width: 100%;
                height: vw(168);
                display: flex;

                .box1{
                    width: vw(274);

                    img{
                        width: 100%;
                        height: 100%;
                    }

                }
            }
        }
    }
  }

  main {
    .hangyefangan {
      height: vw(880);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      background-color: #f5f5f5;
     

      .biaoti-1 {
        width: vw(600);
        height: vw(165);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
      

        p {
          color: #333333;
          font-size: vw(65);
          font-weight: bold;

          &:nth-of-type(2) {
            font-size: vw(22);
            color: #cccccc;
            letter-spacing: vw(10);
          }

          &:nth-of-type(3) {
            font-size: vw(22);
            color: #626262;
            letter-spacing: vw(10);
            font-weight: 400;
          }
        }
      }

      .geren {
        width: vw(1300);
        height: vw(400);
        display: flex;
        justify-content: space-between;

        .geren-1 {
          width: vw(390);
          height: vw(400);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;

          .touxiang {
            width: vw(200);
            height: vw(200);
            border-radius: 50%;
            border: 2px solid orangered;

            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          p {
            &:first-of-type {
              font-size: vw(22);
              color: #545454;
              letter-spacing: vw(3);
            }

         

            &:nth-of-type(2) {
              color: gray;
              font-size: vw(10);
              width: vw(290);
              line-height: vw(22);
              text-align: center;
            }
          }

          .xian {
            background-color: #545454;
            width: vw(50);
            height: vw(1);
          }

          i {
            font-size: vw(30);
            color: gray;
          }
        }
      }

      
    }

    .jingdiananli{
        height: vw(295);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        .text {
            width: vw(280);
            height: vw(80);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

    
            p {
              font-size: vw(45);
              font-weight: bold;
              color: #555555;
            }
    
            span {
              font-size: vw(20);
              font-weight: bold;
              color: #d6d6d6;
              letter-spacing: vw(14);
            }
          }

          ul{
            display: flex;
            width: vw(700);
            height: vw(35);
            text-align: center;
            line-height: vw(35);
            justify-content: space-around;
            color: #888888;
            font-weight: bold;

            li{
                width: vw(100);
                cursor: pointer;

                &:hover{
                    color: orangered;
                    border-bottom: vw(2) solid orangered;
                
                }
            }

            .active{
              color: orangered;
                border-bottom: vw(2) solid orangered;
            }
          }
      }

    .anliMax{
        width: 100%;
        height: vw(1440);
        position: relative;

        

        .anli{
            width: vw(1898);
            height: vw(1440);
            display: flex;
            flex-wrap: wrap;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;  
            overflow: hidden;

            
           
    
            .anli-1{
                width: vw(632);
                height: vw(480);
                position: relative;

               


                .hei5{
                  width: 100%;
                  height: 100%;
                  background-color: rgba($color: #000000, $alpha: 0.5);
                  position: absolute;
                  left: 0;
                  top: 0;
                  opacity: 0;
                

                 
                  .text9{
                    width: vw(215);
                    height: vw(210);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                    position: absolute;
                    left: vw(225);
                    top: vw(150);
                


                    p{
                      font-size: vw(30);
                      color:rgba($color: #fff, $alpha: 0.6);
  
                      &:last-of-type{
                        font-size: vw(18);
                        color: grey;
                        font-weight: bold;
                        letter-spacing: vw(5);
                        
                      }
                    }
  
                    .xian2{
                      width: vw(70);
                      height: vw(3);
                      background-color: grey;
                    }
  
                    button{
                      width: vw(200);
                      height: vw(50);
                      font-size: vw(10);
                      background-color: orangered;
                      color: #f5f5f5;
                      border: none;
                      border-radius: vw(30);
                   
                    }

                  }
               

                  
                }
                
                img{
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }
          
        }

        .active{
          opacity: 1;
        }

       
  

    }

    

    .partner {
        width: 100%;
        height: vw(740);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      
  
        p {
          color: #333333;
          font-size: vw(50);
          margin-bottom: vw(10);
          font-weight: bold;
          letter-spacing: vw(3);
        }
  
        span {
          color: #d6d6d6;
          font-size: vw(30);
          margin-bottom: vw(55);
          letter-spacing: vw(10);
          font-weight: bold;
        }
  
        .pinpai {
          width: vw(1422);
          height: vw(430);
          display: flex;
          flex-wrap: wrap;
  
            img {
              width: vw(232);
            height: vw(135);
            transition: all 0.3s;
              cursor: pointer;
            
              &:hover{
                transform: scale(1.3) translateZ(0);
              }     
            }
          
        }
      }
  }
}
